<template>
<div>
  <particles></particles>

  <div class='slide'>
    <div class='stage'>
      <h4 style="color: #FFFFFF;">{{time}}</h4>
      <div class='logo' :style="'background-image: url('+ logo +')'"></div>
      <h3 style="text-align:center;font-size: 28px;margin-top: 280px;color: #FFFFFF;">{{ desc }}</h3>
    </div>
  </div>

  <div class="form" id="form">
    <h3 style="text-align:center;margin:20px 0 10px 0;font-size: 28px;">登录JPower</h3>
    <el-tabs v-model="activeName">
      <el-tab-pane label="账号密码登录" name="user">
        <userLogin></userLogin>
      </el-tab-pane>
      <el-tab-pane label="手机登录" name="code">
        <codeLogin></codeLogin>
      </el-tab-pane>
      <el-tab-pane label="第三方登录" name="third">
        <thirdLogin></thirdLogin>
      </el-tab-pane>
    </el-tabs>
  </div>

</div>
</template>

<script>
import userLogin from "./userlogin";
import codeLogin from "./codelogin";
import thirdLogin from "./thirdlogin";
import store from '@/store/';
import {
  mapGetters
} from "vuex";
import {
  dateFormat
} from "@/util/date";
import {
  validatenull
} from "@/util/validate";
import topLang from "@/page/index/top/top-lang";
import topColor from "@/page/index/top/top-color";
import Particles from '@/components/particles/index';
export default {
  name: "login",
  components: {
    userLogin,
    codeLogin,
    thirdLogin,
    topLang,
    topColor,
    Particles
  },
  data() {
    return {
      time: "",
      activeName: "user",
      logo: store.getters.logo ? window.urllist.download + store.getters.logo : '/img/logo.png',
      desc: store.getters.logo ? '' : 'JPower 快速开发平台'
    };
  },
  watch: {
    $route() {
      const params = this.$route.query;
      this.socialForm.state = params.state;
      this.socialForm.code = params.code;
      if (!validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: `${
            this.socialForm.state === "WX" ? "微信" : "QQ"
            }登录中,请稍后。。。`,
          spinner: "el-icon-loading"
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }
    }
  },
  created() {
    this.getTime();
    setInterval(() => {
      this.getTime();
    }, 1000);
  },
  mounted() {
    window.$('#form').hide();
    window.$(document).ready(function () {
      window.$('#form').fadeIn(1500);
    });
  },
  computed: {
    ...mapGetters(["website"])
  },
  props: [],
  methods: {
    getTime() {
      this.time = dateFormat(new Date());
    }
  }
};
</script>

<style lang="scss">
@import "@/styles/login.scss";

@media screen and (max-width: 970px){
  .form {
    left: 39%!important;
  }
  .slide {
    display: none;
  }
}

.form {
  position: absolute;
  top: 40%;
  left: 70%;
  margin: -180px 0 0 -160px;
  width: 350px;
  height: 440px;
  padding: 36px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  z-index: 1024;
}

.slide .stage {
  position: absolute;
  left: 15%;
  width: 400px;
  z-index: 4;
  //background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  top: 25%;
}

.slide .stage .logo {
  height: 264px;
  position: absolute;
  width: 100%;
  z-index: 4;
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: center;
}

</style>
